<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
style: {
navigationStyle: 'custom',
navigationBarTitleText: '首页',
},
}
</route>

<template>
  <view class="overflow-hidden bg" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <!-- 蓝色背景部分 -->
    <view class="h-92.5 top">
      <!-- 学校 -->
      <view class="mt-11 flex flex-items-center flex-justify-evenly location">
        <img src="@/static/images/home/arcoDesign-location.png" alt=""/>
        <text style="font-size: 0.88rem">河南牧业经济学院</text>
        <img src="@/static/images/home/ze-arrow.png" alt=""/>
      </view>
      <view class="px-3">
        <!-- 排行榜 -->
        <view class="flex flex-items-center mt-3">
          <view class="top-left">排行榜</view>
          <view class="top-right flex flex-items-center">
            <view class="text flex flex-justify-between flex-items-center">
              <view>岸海露伴总赚</view>
              <view style="color: #f5c158">45.05元</view>
            </view>
            <img src="@/static/images/home/ze-cross.png" alt=""/>
          </view>
        </view>
        <!-- Banner图 -->
        <view class="mt-5">
          <wd-swiper
            :list="swiperList"
            autoplay
            :indicator="{ type: 'dots-bar' }"
            :height="150.08"
          ></wd-swiper>
        </view>
        <!-- Tip -->
        <view class="tip my-3 flex flex-items-center">
          <img style="margin: 0 0.3rem" src="@/static/images/home/riLine-rocket.png" alt=""/>
          <view class="text">温馨提示：需要宿舍楼物品请另外点击</view>
          <img style="margin-left: 0.8rem" src="@/static/images/home/ze-arrow.png" alt=""/>
        </view>
      </view>
    </view>
    <!-- 图片区域（手写 不能 切图！！！） -->
    <view class="px-3 mt-3">
      <view flex flex-justify-between style="height: 7.44rem">
        <view
          class="jiedan-1 flex flex-col flex-items-center"
          @click="goView('/pages/receiving-hall/receiving-hall')"
        >
          <view class="flex flex-items-center ml-3">
            <img src="@/static/images/home/jiedan-1.png" alt="" class="-mt-3"/>
            <img src="@/static/images/home/jiedan-2.png" alt="" class="-mt-3"/>
          </view>
          <view class="jiedan-1-text">接单大厅</view>
        </view>
        <view class="flex flex-col">
          <view
            class="jiedan-2 flex flex-items-center"
            @click="goView('/pages/second-market/second-market')"
          >
            <view class="jiedan-2-text">二手市场</view>
            <img src="@/static/images/home/jiedan-3.png" alt="" class="ml-2"/>
          </view>
          <view
            class="jiedan-3 flex flex-items-center"
            @click="goView('/pages/express-pickup/express-pickup')"
          >
            <view class="jiedan-3-text">快递代取</view>
            <img src="@/static/images/home/jiedan-4.png" alt="" class="ml-2"/>
          </view>
        </view>
      </view>
    </view>
    <!-- 菜单 -->
    <view class="menu px-3">
      <view
        class="menu-item flex flex-col flex-items-center"
        v-for="(item, index) in menus"
        :key="index"
        @click="goView(item.path)"
      >
        <img class="icon" :src="item.url" alt=""/>
        <text class="icon-text">{{ item.title }}</text>
      </view>
    </view>
    <!-- 热门圈子 -->
    <view class="hot px-5  flex flex-items-center flex-justify-between">
      <view class="left ">热门圈子</view>
      <view class="right flex flex-items-center">
        <text>更多</text>
        <img src="@/static/images/home/ze-arrow.png" alt=""/>
      </view>
    </view>
    <view class="px-5 pt-2">
      <img class="hot-img" src="@img/home/hot-img.png" alt=""/>
    </view>
    <!-- tabbar -->
    <tabbar/>
  </view>
</template>

<script lang="ts" setup>
import PLATFORM from '@/utils/platform'

defineOptions({
  name: 'Home',
})

function goView(url: string) {
  uni.navigateTo({
    url,
  })
}

const swiperList = ref([
  new URL('@img/home/banner-1.png', import.meta.url).href,
  new URL('@img/home/banner-2.png', import.meta.url).href,
  new URL('@img/home/banner-3.png', import.meta.url).href,
  new URL('@img/home/banner-4.png', import.meta.url).href,
])
const menus = ref([
  {
    title: '物品上楼',
    url: new URL('@img/home/menu-1.png', import.meta.url).href,
    path: '/pages/something-up-floor/index',
  },
  {
    title: '代占位置',
    url: new URL('@img/home/menu-2.png', import.meta.url).href,
    path: '/pages/replace-get-seat/index',
  },
  {
    title: '快递代寄',
    url: new URL('@img/home/menu-3.png', import.meta.url).href,
    path: '/pages/express-help-send/index',
  },
  {
    title: '代抄代写',
    url: new URL('@img/home/menu-4.png', import.meta.url).href,
    path: '/pages/replace-write/index',
  },
  {
    title: '帮忙服务',
    url: new URL('@img/home/menu-5.png', import.meta.url).href,
    path: '/pages/help-services/index',
  },
  {
    title: '游戏陪玩',
    url: new URL('@img/home/menu-6.png', import.meta.url).href,
    path: '/pages/game-play/index',
  },
  {
    title: '帮我送',
    url: new URL('@img/home/menu-7.png', import.meta.url).href,
    path: '/pages/help-me-send/index',
  },
  {
    title: '优惠券',
    url: new URL('@img/home/menu-8.png', import.meta.url).href,
    path: '/pages/coupon-choose/index',
  },
])
// 获取屏幕边界到安全区域距离
const {safeAreaInsets} = uni.getSystemInfoSync()
onLoad(() => {
  uni.hideTabBar()
})
</script>

<style scoped lang="scss">
.bg {
  // height: 1624rpx;
  padding-bottom: 3.56rem;

  .top {
    overflow: hidden;
    background: linear-gradient(180deg, rgba(76, 139, 254, 1) 0%, rgba(255, 255, 255, 1) 99%);

    .location {
      width: 11rem;
      height: 2.19rem;
      margin-left: 0.44rem;
      background-color: #d6e1fd;
      border: 0.06rem solid rgba(187, 187, 187, 1);
      border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
    }

    .top-left {
      width: 6.81rem;
      height: 2.38rem;
      font-family: PingFangSC-regular;
      font-size: 0.88rem;
      line-height: 2.38rem;
      color: #ffffff;
      text-align: center;
      background-color: rgba(148, 210, 248, 1);
      border: 0.06rem solid rgba(187, 187, 187, 1);
      border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
    }

    .top-right {
      width: 14.31rem;
      height: 2.38rem;
      margin-left: 0.44rem;
      font-family: PingFangSC-regular;
      font-size: 1rem;
      color: rgba(16, 16, 16, 1);
      text-align: center;
      background-color: #e8eefe;
      border: 0.06rem solid rgba(187, 187, 187, 1);
      border-radius: 0.5rem;

      .text {
        width: 11.44rem;
        height: 1.75rem;
        margin-left: 1.13rem;
        font-family: PingFangSC-bold;
        font-size: 1rem;
        color: rgba(0, 0, 0, 1);
        text-align: left;
      }
    }

    .tip {
      width: 21.56rem;
      height: 3.44rem;
      background-color: rgba(255, 240, 173, 1);
      border: 0.06rem solid rgba(187, 187, 187, 1);
      border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;

      .text {
        width: 16.94rem;
        height: 1.75rem;
        font-family: PingFangSC-regular;
        font-size: 0.86rem;
        line-height: 1.75rem;
        color: rgba(223, 166, 23, 1);
        text-align: left;
      }
    }
  }

  .jiedan-1 {
    width: 9.44rem;
    height: 7.44rem;
    background-color: rgba(151, 221, 255, 1);
    border: 0.06rem solid rgba(187, 187, 187, 1);
    padding-bottom: .56rem;

    .jiedan-1-text {
      font-family: SourceHanSansSC-regular;
      font-size: 1.63rem;
      line-height: 2.38rem;
      color: rgba(32, 138, 255, 1);
    }
  }

  .jiedan-2 {
    width: 11.81rem;
    height: 3.44rem;
    background-color: rgba(197, 242, 210, 1);
    border: 0.06rem solid rgba(187, 187, 187, 1);
    padding-bottom: .56rem;


    .jiedan-2-text {
      width: 6rem;
      height: 2.44rem;
      margin-left: 0.63rem;
      font-family: SourceHanSansSC-regular;
      font-size: 1.5rem;
      line-height: 2.38rem;
      color: rgba(96, 159, 90, 1);
      text-align: left;
    }
  }

  .jiedan-3 {
    width: 11.81rem;
    height: 3.69rem;
    margin-top: 0.2rem;
    background-color: rgba(252, 212, 148, 1);
    border: 0.06rem solid rgba(187, 187, 187, 1);

    .jiedan-3-text {
      width: 6rem;
      height: 2.44rem;
      margin-left: 0.63rem;
      font-family: SourceHanSansSC-regular;
      font-size: 1.5rem;
      line-height: 2.38rem;
      color: rgba(96, 159, 90, 1);
      text-align: left;
    }
  }

  .menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.62rem;
    padding-top: 1.2rem;

    .menu-item {
      place-self: center;
      width: 3.5rem;
      height: 5.11rem;

      .icon {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: 50%;
      }

      .icon-text {
        margin-top: 0.13rem;
        font-family: SourceHanSansSC-regular;
        font-size: 0.81rem;
        color: rgba(16, 16, 16, 1);
      }
    }
  }

  .hot {
    margin-top: 1.3rem;

    .left {
      height: 1.44rem;
      font-family: PingFangSC-bold;
      font-size: 1.13rem;
      line-height: 1.56rem;
      color: rgba(0, 0, 0, 1);
      text-align: left;
    }

    .right {
      font-family: PingFangSC-regular;
      font-size: 0.88rem;
      line-height: 1.25rem;
      color: rgba(125, 125, 125, 1);
      text-align: left;
    }
  }

  .hot-img {
    width: 21.13rem;
    height: 8.56rem;
    background-color: rgba(229, 229, 229, 1);
  }
}
</style>
